import { useState } from "react";
import "../App.css";
import { getSchema, setSchema } from "@/api/schema";
import React from "react";
import SchemaBuilder from "@xrenders/schema-builder";
import { useRef } from "react";
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, Flex } from 'antd';

function App() {
  const [size] = useState('large');
  const SB = useRef(null);
  const handleGetSchema = () => {
    getSchema().then((res) => {
      const getSchema = res.data.schema;
      console.log("🚀 ~ getSchema ~ ref.SB:", SB);
      SB.current.setValue(getSchema);
    });
  };
  const handleSetSchema = () => {
    const schema = SB ? SB.current.getValue() : "";
    setSchema(schema).then((res) => {
      console.log("🚀 ~ 返回结果res.data.data:", res.data.data);
    });
  };
  return (
    <div className="App" style={{ height: "100%" }}>
      <Flex gap="small" wrap="wrap" justify="justify-content" vertical style={{ height: "6%" }}>
        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} onClick={handleGetSchema}>
        获取Mock Schema数据
        </Button>
        <Button type="primary" icon={<UploadOutlined />} size={size} onClick={handleSetSchema}>
        提交现在的 Schema数据
        </Button>
      </Flex>
      <div style={{ height: "94%" }}>
        <SchemaBuilder
          ref={SB}
          importBtn={true}
          exportBtn={true}
          pubBtn={false}
          onMount={goTest()}
        />
      </div>
    </div>
  );
}
function goTest() {}

export default App;
